<template>
	<view class="display uv-flex-column">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 60px"></uv-text>
		</view>
		<view id="bd_view" class="bd uv-flex-column hidden-scrollbar">
			<input v-if="typing.showInput" @input="inputChange" v-model="typing.inputText" cursor-color="#fff" autocomplete="off" autocorrect="off" autocapitalize="off" focus spellcheck="false" class="typing-input" :style="{top: typing.offset.top,left: typing.offset.left}">
			<template v-for="(item,index) in typing.contentGroup" :key="index">
				<view class="item-row" :class="['item-row-'+index,{'active': typing.content[typing.current]?.parentIndex == index}]">
					<view class="words uv-flex-row">
						<view class="words-item" :class="[{'pass':typing.current > item2.index}]" v-for="(item2,index2) in item" :key="index2">{{item2.char}}</view>
					</view>
					<uv-line custom-style="padding: 10px 0;"></uv-line>
					<view class="input uv-flex-row">
						<view :class="[`input-item-${item2.index}`,itemClassName(item2.index)]" class="input-item" v-for="(item2,index2) in item" :key="index2">{{recordInputText(item2.index)}}</view>
					</view>
				</view>
			</template>
		</view>
		<view class="real-time">
			<real-time :typing="typing" :successRate="successRate" :percentage="progress" />
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>
<script setup>
	import { watch, defineComponent, ref } from 'vue';
	import { keyboardList } from '@/common/js/keyboard.js';
	import useTyping from '../hooks/useTypingENCOPY.js';
	import realTime from './real-time.vue';
	import progressLine from './progress-line.vue';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, realTime, popupComplete });
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { typing, inputChange, recordInputText, successRate, progress, itemClassName, courseComplete } = useTyping(() => {
		return props.cont;
	})
</script>
<style scoped lang="scss">
	@import '../common/style.scss';
	.bd {
		position: relative;
		height: 360px;
		overflow-x: hidden;
		overflow-y: auto;
		margin: 0 auto;
		.item-row {
			padding: 20px;
			text-align: center;
			&.active {
				box-shadow: rgb(216, 88, 134) 4px 0px 0px 0px inset;
				background: rgb(28, 29, 36);
			}
			.words {
				&-item {
					flex-shrink: 0;
					width: 17px;
					margin-right: 4px;
					font-size: 28px;
					color: rgb(127, 133, 150);
					&.pass {
						color: rgb(249, 250, 252);
					}
				}
			}
			.input {
				height: 44px;
				&-item {
					flex-shrink: 0;
					width: 17px;
					height: 100%;
					margin-right: 4px;
					font-size: 28px;
					color: rgb(127, 133, 150);
					&.success {
						color: rgb(48, 178, 140);
					}
					&.error {
						color: rgb(229, 79, 74);
					}
					&.warn {
						color: rgb(253, 194, 79);
					}
				}
			}
		}
		.typing-input {
			position: absolute;
			left: 0;
			right: 0;
			height: 44px;
			font-size: 28px;
			color: rgb(249, 250, 252);
		}
	}
</style>